{layout name="layout2" /}
<style>
    .layui-form-label{
        width: 120px;
    }
    .layui-card .layui-tab{
        margin-left: 7px;
    }
    .layui-form-label{
        margin-left: 20px;
        width: 98px;
    }
    .layui-input-inline{
        width:160px;
    }
    .layui-table-cell {
         height: auto;
     }

</style>
<div class="layui-form" lay-filter="layuiadmin-form-user_group" id="layuiadmin-form-user_group" style="padding: 20px 30px 0 0;">
<!--    <div class="layui-form-item div-flex">-->
<!--        <fieldset class="layui-elem-field layui-field-title">-->
<!--            <legend>基础信息</legend>-->
<!--        </fieldset>-->
<!--    </div>-->
<!--    <div class="layui-form-item">-->
<!--        <label class="layui-form-label">会员昵称：</label>-->
<!--        <div class="layui-input-inline">-->
<!--            <label class="layui-form-mid"></label>-->
<!--        </div>-->
<!--        <label class="layui-form-label">会员编号：</label>-->
<!--        <div class="layui-input-inline">-->
<!--            <label class="layui-form-mid"></label>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="layui-form-item">-->
<!--        <label class="layui-form-label">会员头像：</label>-->
<!--        <div class="layui-input-inline">-->
<!--            <label class="layui-form-mid">-->
<!--                <img class="image-show" src="{$detail.avatar}" width="80px" height="80px">-->
<!--            </label>-->
<!--        </div>-->
<!--        <label class="layui-form-label">会员等级：</label>-->
<!--        <div class="layui-input-inline">-->
<!--            <label class="layui-form-mid"></label>-->
<!--        </div>-->

<!--    </div>-->
<!--    <div class="layui-form-item">-->
<!--        <label class="layui-form-label">手机号码：</label>-->
<!--        <div class="layui-input-inline">-->
<!--            <label class="layui-form-mid">{$detail.mobile}</label>-->
<!--        </div>-->
<!--        <label class="layui-form-label">性别：</label>-->
<!--        <div class="layui-input-inline">-->
<!--            <label class="layui-form-mid"></label>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="layui-input-item">-->
<!--        <label class="layui-form-label">生日：</label>-->
<!--        <div class="layui-input-inline">-->
<!--            <label class="layui-form-mid"></label>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="layui-form-item">-->
<!--        <label class="layui-form-label">注册时间：</label>-->
<!--        <div class="layui-input-inline">-->
<!--            <label class="layui-form-mid">{$detail.create_time}</label>-->
<!--        </div>-->
<!--        <label class="layui-form-label">最后下单登录：</label>-->
<!--        <div class="layui-input-inline">-->
<!--            <label class="layui-form-mid">{$detail.order_last_time}</label>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="layui-form-item div-flex">-->
<!--        <fieldset class="layui-elem-field layui-field-title">-->
<!--            <legend>分销信息</legend>-->
<!--        </fieldset>-->
<!--    </div>-->
<!--    <div class="layui-form-item">-->
<!--        <label class="layui-form-label">分销会员：</label>-->
<!--        <div class="layui-input-inline">-->
<!--            <label class="layui-form-mid"></label>-->
<!--        </div>-->
<!--        <label class="layui-form-label">邀请码：</label>-->
<!--        <div class="layui-input-inline">-->
<!--            <label class="layui-form-mid"></label>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="layui-form-item">-->
<!--        <label class="layui-form-label">推荐人：</label>-->
<!--        <div class="layui-input-inline">-->
<!--            <label class="layui-form-mid"></label>-->
<!--        </div>-->
<!--        <label class="layui-form-label">推荐人编号：</label>-->
<!--        <div class="layui-input-inline">-->
<!--            <label class="layui-form-mid"></label>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="layui-form-item div-flex">-->
<!--        <fieldset class="layui-elem-field layui-field-title">-->
<!--            <legend>账户信息</legend>-->
<!--        </fieldset>-->
<!--    </div>-->
<!--    <div class="layui-form-item">-->
<!--        <label class="layui-form-label">余额：</label>-->
<!--        <div class="layui-input-inline">-->
<!--            <label class="layui-form-mid"></label>-->
<!--        </div>-->
<!--        <label class="layui-form-label">积分：</label>-->
<!--        <div class="layui-input-inline">-->
<!--            <label class="layui-form-mid"></label>-->
<!--        </div>-->
<!--        <label class="layui-form-label">成长值：</label>-->
<!--        <div class="layui-input-inline">-->
<!--            <label class="layui-form-mid"></label>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="layui-form-item div-flex">-->
<!--        <fieldset class="layui-elem-field layui-field-title">-->
<!--            <legend>消费能力</legend>-->
<!--        </fieldset>-->
<!--    </div>-->
<!--    <div class="layui-form-item" >-->
<!--        <label class="layui-form-label" style="margin-left: 72px;">本月消费金额：</label>-->
<!--        <div class="layui-input-inline" style="width: 100px;">-->
<!--            <label class="layui-form-mid"></label>-->
<!--        </div>-->
<!--        <label class="layui-form-label">本月订单笔数：</label>-->
<!--        <div class="layui-input-inline" style="width: 100px;">-->
<!--            <label class="layui-form-mid"></label>-->
<!--        </div>-->
<!--        <label class="layui-form-label">累积消费金额：</label>-->
<!--        <div class="layui-input-inline" style="width: 100px;">-->
<!--            <label class="layui-form-mid"></label>-->
<!--        </div>-->
<!--        <label class="layui-form-label">累积订单笔数：</label>-->
<!--        <div class="layui-input-inline" style="width: 100px;">-->
<!--            <label class="layui-form-mid"></label>-->
<!--        </div>-->
<!--        <label class="layui-form-label">平均消费单价：</label>-->
<!--        <div class="layui-input-inline" style="width: 100px;">-->
<!--            <label class="layui-form-mid"></label>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="layui-form-item div-flex">-->
<!--        <fieldset class="layui-elem-field layui-field-title">-->
<!--            <legend>消费明细</legend>-->
<!--        </fieldset>-->
<!--    </div>-->
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-tab layui-tab-card" lay-filter="tab-all">
                <ul class="layui-tab-title">
                    <li class="layui-this">我的订单</li>
                    <li >押瓶记录</li>
                    <li >租金结算记录</li>
<!--                    <li >余额明细</li>-->
<!--                    <li >推广明细</li>-->
<!--                    <li >收货地址</li>-->
                </ul>
            </div>
            <script type="text/html" id="referrer">
                <img src="{{d.avatar}}" style="height:80px;width: 80px;margin-right: 10px;" class="image-show">
                <div class="layui-input-inline">
                    <label>编号：</label>
                    <br/>
                    <label>手机号码：</label>
                    <br/>
                    <label>昵称：</label>
                    <br/>
                    <label>注册时间：</label>
                </div>
            </script>


            <script type="text/html" id="tuiping" >

                <div class="" style="display: flex;flex-direction: row;flex-wrap:wrap;">
                    {{#  layui.each(d.bottle_site_list, function(index, item){ }}
                        <p style="display: inline-block;margin:5px 10px;"><input type="radio" name="site_id" class="site_id" value="{{item.id}}" title="{{item.name}}" ></p>
                    {{#  }); }}
                </div>
                <div style="text-align: right">
                    <a class="layui-btn layui-btn-danger layui-btn-sm operation-btn tuiping" index="{{d.id}}" >退瓶</a>
                </div>

            </script>
            <script type="text/html" id="account">
                {{#  layui.each(d.bottle_code, function(index, item){ }}
                <div class="layui-input-block" style="border-bottom:1px solid #e8e8e8;margin-left:0;">
                    <label>共享瓶编码：{{item.bottle_code}}</label>
                    <br/>
                    <label>开始使用日期：{{item.time}}</label>
                    <br/>
                    <label>结束使用日期：{{d.end_time??''}}</label>
                    <br/>
                    <label>支付时间：{{d.pay_time??''}}</label>
                </div>
                {{#  }); }}
            </script>
            <script type="text/html" id="address">
                <div class="layui-input-inline">
                    <label>联系人：{{d.consignee}}</label>
                    <br/>
                    <label>联系手机：{{d.mobile}}</label>
                    <br/>
                    <label>收货地址：{{d.address??''}} {{d.address_detail??''}}</label>
                    <br/>
                </div>
            </script>

            <div class="layui-card-body">
                <table id="lists" lay-filter="lists"></table>
            </div>
        </div>

    </div>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="user_group-submit" id="user_group-submit" value="确认">
    </div>
</div>
<script>
    layui.config({
        version:"{$front_version}",
        base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','table','like','element'], function(){
        var $ = layui.$
            ,form = layui.form
            ,table = layui.table
            ,like = layui.like
            ,element = layui.element
            ,id = {$detail.id};
        element.on('tab(tab-all)', function (data) {
            var index = data.index;
            getList(index);
        })
        $(document).on('click', '.image-show', function () {
            var src = $(this).attr('src');
            like.showImg(src,600);
        });
        $(document).on('click', '.tuiping', function () {
            var id = $(this).attr('index');
            var site_id = $("[name='site_id']:radio:checked").val()
            if(site_id==null){
                layer.msg("退瓶请选择站点！")
                return
            }
            layer.confirm('确认操作退瓶吗?', {
                btn: ['确认','取消'] //按钮
            }, function(){
                $.ajax({
                    url: '{:url("user/tuiping")}'
                    , data: {'id': id,'site_id':site_id}
                    , type: 'post'
                    , success: function (res) {
                        if (res.code == 1) {
                            layui.layer.msg(res.msg, {
                                offset: '15px'
                                , icon: 1
                                , time: 1000
                            },function () {
                                getList(1)
                                // table.reload('user-lists');
                            });
                        }
                    },
                });
            });
        });

        getList(0)
        function getList(index){
            switch (index) {
                case 0:
                    var cols = [
                        {field: 'order_sn', title: '订单编号',width: 180}
                        ,{field: 'address', title: '收货地址',width: 460,toolbar: '#address'}
                        ,{field: 'bottle_num', title: '商品数量',align: 'center',width: 100}
                        ,{field: 'order_amount', title: '订单总额',width: 120, templet: function(d){
                               return '￥'+ d.order_amount +'</span>'
                            }
                        }
                        ,{field: 'order_status',title:'订单状态' ,width: 120}
                        ,{field: 'pay_time',title:'订单支付时间' ,width: 160}

                    ];
                    break;
                case 1:
                    var cols = [
                        {field: 'id', title: 'ID',},
                        {field: 'code', title: '共享瓶编码',}
                        // ,{field: 'change_amount', title: '变动积分',}
                        // ,{field: 'left_amount', title: '剩余积分',}
                        // ,{field: 'remark', title: '备注',}
                        ,{field: 'updatetime', title: '开始使用时间',}
                        ,{field: 'bottle_rent_money', title: '租金累计',}
                        ,{field: 'bottle_deposit', title: '共享瓶押金',}
                        ,{field: 'id', title: '退瓶操作',toolbar: '#tuiping',width: 380}
                    ];
                    break;
                case 2:
                    var cols = [
                        {field: 'id', title: 'ID'}
                        ,{field: 'pay_amount', title: '租金合计',}
                        ,{field: 'if_pay', title: '缴费状态',}
                        ,{field: 'bottle_code', title: '钢瓶信息',toolbar: '#account'}
                    ];
                    break;
                case 3:
                    var cols = [
                         {field: 'id', title: 'ID'}
                        ,{field: 'pay_amount', title: '缴费金额',}
                        ,{field: 'if_pay', title: '缴费状态',}
                        ,{field: 'bottle_code', title: '账户金额',toolbar: '#account'}
                    ];
                    break;
                case 4:
                    var cols = [
                        {field: 'id', title: 'ID'}
                        ,{field: 'pay_amount', title: '缴费金额',}
                        ,{field: 'if_pay', title: '缴费状态',}
                        ,{field: 'bottle_code', title: '账户金额',toolbar: '#account'}
                    ];
                    break;
                case 5:
                    var cols = [
                        {field: 'contact', title: '联系人',}
                        ,{field: 'telephone', title: '联系手机',}
                        ,{field: 'address', title: '收货地址',}
                        ,{field: 'default', title: '默认地址',}
                    ];
                    break;
                
            }
            table.render({
                id:'lists'
                ,elem: '#lists'
                ,url: '{:url("user/getList")}?type='+index+'&user_id='+id //模拟接口
                ,cols: [cols]
                ,page:true
                ,text: {none: '暂无数据！'}
                ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                    return {
                        "code":res.code,
                        "msg":res.msg,
                        "count": res.data.count, //解析数据长度
                        "data": res.data.lists, //解析数据列表
                        "data2":res.data.site_lists //站点信息
                    };
                }
            });

        }

    })
</script>